<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DeepSeek API 交互平台</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 自定义Tailwind配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#4F46E5', // 主色调：深紫色
                        secondary: '#7C3AED', // 辅助色：紫色
                        accent: '#EC4899', // 强调色：粉色
                        dark: '#1E293B', // 深色
                        light: '#F8FAFC'  // 浅色
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    animation: {
                        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
                    }
                },
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .bg-gradient-primary {
                background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .transition-custom {
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .scrollbar-hide {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
        }
    </style>
    <link href="/css/style.css" rel="stylesheet">
</head>
<body class="bg-gray-50 min-h-screen flex flex-col">
    <!-- 导航栏 -->
    <header class="bg-white shadow-md sticky top-0 z-50">
        <div class="container mx-auto px-4 py-4 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <i class="fa fa-code text-primary text-2xl"></i>
                <h1 class="text-xl font-bold text-gray-800">DeepSeek API 交互平台</h1>
            </div>
            <nav class="hidden md:flex space-x-8">
                <a href="#text-input" class="text-gray-600 hover:text-primary transition-custom">文本生成</a>
                <a href="#file-upload" class="text-gray-600 hover:text-primary transition-custom">文件处理</a>
                <a href="#about" class="text-gray-600 hover:text-primary transition-custom">关于</a>
            </nav>
            <div class="md:hidden">
                <button id="mobile-menu-button" class="text-gray-600 hover:text-primary transition-custom">
                    <i class="fa fa-bars text-xl"></i>
                </button>
            </div>
        </div>
        <!-- 移动端菜单 -->
        <div id="mobile-menu" class="hidden md:hidden bg-white border-t">
            <div class="container mx-auto px-4 py-2 flex flex-col space-y-3">
                <a href="#text-input" class="text-gray-600 hover:text-primary py-2 transition-custom">文本生成</a>
                <a href="#file-upload" class="text-gray-600 hover:text-primary py-2 transition-custom">文件处理</a>
                <a href="#about" class="text-gray-600 hover:text-primary py-2 transition-custom">关于</a>
            </div>
        </div>
    </header>

    <!-- 主要内容 -->
    <main class="flex-grow container mx-auto px-4 py-8">
        <!-- 介绍部分 -->
        <section class="mb-8 text-center">
            <div class="inline-block p-2 px-4 rounded-full bg-primary/10 text-primary font-medium mb-4">
                <i class="fa fa-rocket mr-2"></i>DeepSeek API
            </div>
            <h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold text-gray-800 mb-4">
                强大的 AI 对话助手
            </h2>
        </section>

        <!-- 结果展示部分 - 移到顶部 -->
        <section id="result" class="mb-6 bg-white rounded-xl shadow-lg p-6 transition-custom hover:shadow-xl">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-semibold text-gray-800">
                    <i class="fa fa-comments text-primary mr-2"></i>对话结果
                </h3>
                <div class="flex space-x-3">
                    <button id="copy-result" class="px-3 py-1 text-sm border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-custom hidden">
                        <i class="fa fa-copy mr-1"></i>复制结果
                    </button>
                    <button id="download-response" class="px-3 py-1 text-sm border border-gray-300 rounded-lg text-gray-400 hover:bg-gray-50 transition-custom" disabled>
                        <i class="fa fa-download mr-1"></i>下载为 MD
                    </button>
                </div>
            </div>
            <div id="result-content" class="min-h-[300px] border border-gray-200 rounded-lg p-4 bg-gray-50 overflow-auto scrollbar-hide">
                <div class="text-center py-12 text-gray-500">
                    <i class="fa fa-robot text-5xl mb-4 block"></i>
                    <p class="text-lg">DeepSeek 助手随时为您服务</p>
                    <p class="text-sm mt-2">请在下方输入您的问题，我将尽力为您解答</p>
                </div>
            </div>
        </section>

        <!-- 文本输入和文件上传组合部分 - 移到下方 -->
        <section id="text-input" class="mb-10 bg-white rounded-xl shadow-lg p-6 transition-custom hover:shadow-xl">
            <div class="flex flex-col md:flex-row gap-6">
                <!-- 主输入区域 -->
                <div class="flex-grow space-y-4">
                    <div class="flex items-center justify-between">
                        <h3 class="text-lg font-semibold text-gray-800">
                            <i class="fa fa-comment text-primary mr-2"></i>输入提示
                        </h3>
                        <button id="clear-prompt" class="px-3 py-1 text-sm border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-custom">
                            <i class="fa fa-trash-o mr-1"></i>清空
                        </button>
                    </div>
                    
                    <div class="space-y-2">
                        <textarea id="prompt" rows="6" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom resize-none" placeholder="请输入您的问题或提示..."></textarea>
                    </div>
                    
                    <div class="grid grid-cols-3 gap-4">
                        <div class="space-y-1">
                            <select id="model" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom text-sm">
                                <option value="deepseek-chat">deepseek-chat</option>
                                <option value="deepseek-reasoner">deepseek-reasoner</option>
                            </select>
                        </div>
                        <div class="space-y-1">
                            <input type="number" id="temperature" min="0" max="2" step="0.1" value="0.7" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom text-sm">
                        </div>
                        <div class="space-y-1">
                            <input type="number" id="max-tokens" min="1" max="4096" value="1024" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom text-sm">
                        </div>
                    </div>
                    
                    <div class="flex items-center justify-between pt-2">
                        <div class="flex items-center space-x-2 text-sm text-gray-600">
                            <input type="checkbox" id="save-to-history" class="rounded text-primary focus:ring-primary/50">
                            <label for="save-to-history">保存到历史记录</label>
                        </div>
                        <button id="generate-response" class="px-6 py-2.5 bg-primary text-white rounded-lg hover:bg-primary/90 transition-custom font-medium flex items-center">
                            <i class="fa fa-paper-plane mr-2"></i>发送
                        </button>
                    </div>
                </div>
                
                <!-- 文件上传侧边栏 -->
                <div id="file-upload" class="w-full md:w-64 space-y-4">
                    <h3 class="text-lg font-semibold text-gray-800">
                        <i class="fa fa-file-text-o text-primary mr-2"></i>文件上传
                    </h3>
                    
                    <div id="file-drop-area" class="border-2 border-dashed border-gray-300 rounded-lg p-5 text-center hover:border-primary/50 transition-custom cursor-pointer bg-gray-50 h-40 flex flex-col items-center justify-center">
                        <input type="file" id="file-input" class="hidden" accept=".md">
                        <i class="fa fa-file-text-o text-3xl text-gray-400 mb-2"></i>
                        <p class="text-gray-600 text-sm">上传 Markdown 文件</p>
                        <p class="text-xs text-gray-400 mt-1">.md 格式，最大 10MB</p>
                    </div>
                    
                    <div id="file-info" class="hidden items-center space-x-2 p-2 bg-gray-50 rounded-lg border border-gray-200">
                        <i class="fa fa-file-text-o text-primary"></i>
                        <span id="file-name" class="text-gray-700 truncate flex-grow text-sm"></span>
                        <button id="remove-file" class="text-gray-500 hover:text-red-500 transition-custom">
                            <i class="fa fa-times"></i>
                        </button>
                    </div>
                    
                    <button id="upload-file" class="w-full px-4 py-2 bg-secondary text-white rounded-lg hover:bg-secondary/90 transition-custom font-medium flex items-center justify-center text-sm">
                        <i class="fa fa-upload mr-2"></i>上传并处理
                    </button>
                </div>
            </div>
        </section>

        <!-- 历史记录部分 -->
        <section id="history" class="mb-10 bg-white rounded-xl shadow-lg p-6 transition-custom hover:shadow-xl">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-semibold text-gray-800">
                    <i class="fa fa-history text-primary mr-2"></i>历史记录
                </h3>
                <button id="clear-history" class="px-3 py-1 text-sm border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-custom">
                    <i class="fa fa-trash mr-1"></i>清空历史
                </button>
            </div>
            <div id="history-list" class="space-y-3 max-h-[300px] overflow-y-auto scrollbar-hide">
                <div class="text-center py-6 text-gray-500">
                    <p>暂无历史记录</p>
                </div>
            </div>
        </section>

        <!-- 关于部分 -->
        <section id="about" class="mb-10 bg-white rounded-xl shadow-lg p-6 transition-custom hover:shadow-xl">
            <h3 class="text-lg font-semibold text-gray-800 mb-4">
                <i class="fa fa-info-circle text-primary mr-2"></i>关于
            </h3>
            <div class="space-y-4 text-gray-600">
                <p>DeepSeek API 交互平台是一个用于与 DeepSeek 大语言模型进行交互的 Web 应用。</p>
                <p>平台支持以下功能：</p>
                <ul class="list-disc pl-5 space-y-1">
                    <li>通过文本提示调用 DeepSeek API 生成回复</li>
                    <li>上传 Markdown 文件并获取 AI 处理结果</li>
                    <li>将 AI 生成的结果下载为 Markdown 文件</li>
                    <li>保存和管理历史记录</li>
                </ul>
                <p class="text-sm mt-4">© 2023 DeepSeek API 交互平台 - 基于 Spring Boot 和 DeepSeek API 构建</p>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="bg-gray-800 text-white py-8">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div>
                    <div class="flex items-center space-x-2 mb-4">
                        <i class="fa fa-code text-primary text-xl"></i>
                        <h3 class="text-lg font-bold">DeepSeek API 交互平台</h3>
                    </div>
                    <p class="text-gray-400 text-sm">
                        快速、高效地与 DeepSeek 大语言模型进行交互，提升您的工作效率。
                    </p>
                </div>
                <div>
                    <h4 class="text-md font-semibold mb-4">功能链接</h4>
                    <ul class="space-y-2 text-sm text-gray-400">
                        <li><a href="#text-input" class="hover:text-white transition-custom">文本生成</a></li>
                        <li><a href="#file-upload" class="hover:text-white transition-custom">文件处理</a></li>
                        <li><a href="#history" class="hover:text-white transition-custom">历史记录</a></li>
                    </ul>
                </div>
                <div>
                    <h4 class="text-md font-semibold mb-4">联系我们</h4>
                    <ul class="space-y-2 text-sm text-gray-400">
                        <li class="flex items-center"><i class="fa fa-envelope-o mr-2"></i> support@deepseek-api.example</li>
                        <li class="flex items-center"><i class="fa fa-github mr-2"></i> github.com/deepseek-api</li>
                    </ul>
                </div>
            </div>
            <div class="border-t border-gray-700 mt-6 pt-6 text-center text-sm text-gray-500">
                © 2023 DeepSeek API 交互平台. 保留所有权利.
            </div>
        </div>
    </footer>

    <!-- 加载中模态框 -->
    <div id="loading-modal" class="fixed inset-0 flex items-center justify-center bg-black/50 z-50 hidden">
        <div class="bg-white rounded-xl p-6 max-w-md w-full flex flex-col items-center">
            <div class="w-16 h-16 border-4 border-primary/30 border-t-primary rounded-full animate-spin mb-4"></div>
            <h3 class="text-lg font-semibold text-gray-800 mb-2">处理中</h3>
            <p class="text-gray-600 text-center" id="loading-message">正在与 DeepSeek API 通信，请稍候...</p>
        </div>
    </div>

    <!-- 错误提示模态框 -->
    <div id="error-modal" class="fixed inset-0 flex items-center justify-center bg-black/50 z-50 hidden">
        <div class="bg-white rounded-xl p-6 max-w-md w-full">
            <div class="flex items-center mb-4">
                <div class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center text-red-500 mr-3">
                    <i class="fa fa-exclamation-triangle"></i>
                </div>
                <h3 class="text-lg font-semibold text-gray-800">错误</h3>
            </div>
            <p class="text-gray-600 mb-4" id="error-message">发生错误，请重试。</p>
            <div class="flex justify-end">
                <button id="close-error-modal" class="px-4 py-2 bg-gray-200 text-gray-800 rounded-lg hover:bg-gray-300 transition-custom">
                    关闭
                </button>
            </div>
        </div>
    </div>

    <!-- 成功提示模态框 -->
    <div id="success-modal" class="fixed inset-0 flex items-center justify-center bg-black/50 z-50 hidden">
        <div class="bg-white rounded-xl p-6 max-w-md w-full">
            <div class="flex items-center mb-4">
                <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center text-green-500 mr-3">
                    <i class="fa fa-check"></i>
                </div>
                <h3 class="text-lg font-semibold text-gray-800">成功</h3>
            </div>
            <p class="text-gray-600 mb-4" id="success-message">操作已成功完成。</p>
            <div class="flex justify-end">
                <button id="close-success-modal" class="px-4 py-2 bg-gray-200 text-gray-800 rounded-lg hover:bg-gray-300 transition-custom">
                    关闭
                </button>
            </div>
        </div>
    </div>

    <script src="/js/app-updated.js"></script>
</body>
</html>